<!--  -->
<template>
  <div class="bottom-items">
    <mt-tabbar v-model="selected" fixed class="item">
      <mt-tab-item id="/msite">
        <span class="iconfont icon-waimai"> </span>
        <p>外卖</p>
      </mt-tab-item>
      <mt-tab-item id="/search">
        <span class="iconfont icon-sousuo1"> </span>
        <p>搜索</p>
      </mt-tab-item>
      <mt-tab-item id="/order">
        <span class="iconfont icon-dingdan"> </span>
        <p>订单</p>
      </mt-tab-item>
      <mt-tab-item id="/profile"
        ><span class="iconfont icon-wode-copy"> </span>
        <p>我的</p>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabItem } from "mint-ui";

export default {
  data() {
    return { selected: "/msite" };
  },

  components: { Tabbar, TabItem },

  computed: {},
  watch: {
    selected(newValue) {
      if (this.$route.path !== this.selected) {
        this.$router.push(newValue);
      }
    },
    $route() {
      if (this.$route.meta.isShowBottomBar) {
        this.selected = this.$route.path;
      }
    },
  },
  mounted() {
    this.selected = this.$route.path;
  },
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>

.mint-tab-item >>> .mint-tab-item-label
    font-size:16px

.mint-tabbar
    color: #707070
    background: #fff !important
    font-weight: bold
    font-size: 20px

.mint-tabbar p
    margin-top:10px
    margin-bottom: 0

.mint-tabbar >>> .is-selected
    background: #fff !important
    color: #1afa29 !important
</style>
